<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属模块" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <el-option label="新闻动态" value="shanghai"></el-option>
                <el-option label="实时热点" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="content">

              <quill-editor
                class="ql-editor"
                v-model="ruleForm.content"
                ref="myQuillEditor"

                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
              >
              </quill-editor>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">模拟在富文本编辑器添加上传到文件服务器的图片url</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="LookForm('ruleForm')">预览效果</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
          </el-form>
          <el-dialog
            title="预览效果"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <h1 class="news-title">{{ruleForm.name}}</h1>
            <div class="news-content" ref="dom"></div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'richText',
  components: { quillEditor },
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        name: '',
        region: '',
        content: '' //双向数据绑定数据
      }, rules: {
        name: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择模块', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },

      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: [] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video']] // 链接、图片、视频
        },
        placeholder: '内容...'
      }
    }
  },
  methods: {

    LookForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
         this.dialogVisible = true
          this.$nextTick(()=>{
            let dom = this.$refs.dom
            dom.innerHTML = this.ruleForm.content
          })
        } else {
          return false
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: 'success',
            message: '模拟保存成功!'
          })
        } else {
          return false
        }
      })
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      this.ruleForm.content = html
    }
  }

}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 20px;
  ::v-deep.quill-editor {
    margin-top: -25px;
    margin-left: -15px;
  }
  ::v-deep.el-dialog{
    min-width: 700px;
  }
  ::v-deep.ql-editor {
    padding: 12px 15px 0 15px;
  }

  .el-input {
    width: 400px;
  }

  ::v-deep.el-form-item__label {
    font-weight: 400;
  }

  ::v-deep.ql-container {
    height: 400px;
  }
  .news-title{
    text-align: center;
  }
  ::v-deep.news-content p img{
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
}
</style>
